<template>
  <div>
    <u-navbar :is-back="true" title="收货地址" back-text="">
      <view
        class="slot-right"
        style="width: 100%; display: flex; justify-content: flex-end"
      >
        <!-- <div>
                <img @click="goSettingM" style="width: 1rem;padding: 1rem;" src="../../style/image/my/设 置.png" alt="">
                </div> -->
      </view>
    </u-navbar>

    <div class="addressList">
      <div
        class="addressList-items"
        v-for="(item, index) in showData"
        :key="index"
      >
        <div class="HR"></div>

        <div style="padding: 1rem;">

        <div class="content-top">
          <div
            style="
font-size: 0.79rem;
font-family: PingFang SC;
font-weight: 400;
color: #3C3C3C;
            "
          >
            收货人:买买买
          </div>
          <div  style="
              font-size: 0.75rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: #3c3c3c;
            " >12378906756</div>
        </div>
        <div>
          <div   style="
              font-size: 0.75rem;
              font-family: PingFang SC;
              font-weight: 300;
              color: #3c3c3c;
              padding: 0.5rem 0rem;
              border-bottom: 1px solid #f2f2f2;
            ">
            此处填写详情地址信息此处填写详情地址信息此处填写详情地址信息
          </div>
        </div>
        <div class="content-bottom">
          <div style="display: flex;align-items: center;">
            <img style="width: 0.8rem;
height: 0.8rem;
margin-right: 0.2rem;" src="../../style/image/cargo/selectRound.png" alt="" />
            <div style="
font-size: 0.68rem;
font-family: PingFang SC;
font-weight: 400;
color: #02AF74;" >默认地址</div>
          </div>

          <div class="content-bottom-right" >
            <div style="display: flex;align-items: center;margin-right: 1rem;">
              <img style="width: 0.8rem;
height: 0.8rem;
margin-right: 0.2rem;"src="../../style/image/order/edit.png" alt="" />
              <div class="bottom-text" >编辑</div>
            </div>
            <div style="display: flex;align-items: center;">
              <img style="width: 0.8rem;
height: 0.8rem;
margin-right: 0.2rem;"src="../../style/image/order/delete.png" alt="" />
              <div  class="bottom-text"  >删除</div>
            </div>
          </div>

        </div>

        
        </div>
        
      </div>
    </div>


        <div @click="addAddress"  class="footP" >
            <div  style="padding: 0.7rem;
display: flex;align-items: center;" >
                <!-- <img style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
                <div  style="color: white;
margin-left: 0.2rem;
display: flex;
align-items: center;">
<img style="width:1rem;margin-right: 0.2rem;" src="../../style/image/order/add.png" alt="">
  <div>添加新地址</div>
</div>
            </div>
  
    </div>

  </div>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public showData = [1, 2, 3];

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }

  addAddress(){

    console.log('12321312')

      uni.navigateTo({
      url: './addAddress'
      });
  }


}
</script>

<style  scoped>
.addressList-items {
  /* padding: 1rem; */
}

.content-top {
  display: flex;
  justify-content: space-between;
}
.content-bottom{
 display: flex;
 justify-content: space-between;
 margin-top: 0.5rem;
}

.content-bottom-right{
        display: flex;
    }

 .bottom-text{
    
font-size: 0.68rem;
font-family: PingFang SC;
font-weight: 400;
color: #666666;
 }
 .HR{
  height: 0.5rem;
  background-color: #f3f5f7;
 }
 
.footP{

position: absolute;
bottom: 0;
background-color: #02af74;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

</style>